<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>简化版结算页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <style>
        .container {
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .order-summary {
            background-color: #f8f9fa;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .address-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .address-card.selected {
            border-color: #007bff;
            background-color: #f0f7ff;
        }
        .product-item {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        .btn-submit {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 引入头部导航 -->
    <jsp:include page="common/header.jsp"></jsp:include>
    
    <div class="container">
        <h2 class="mb-4">订单结算</h2>
        
        <!-- 收货地址选择 -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">收货地址</h5>
            </div>
            <div class="card-body">
                <c:if test="${empty shippingAddresses}">
                    <p class="alert alert-warning">您还没有添加收货地址，请先添加收货地址</p>
                </c:if>
                
                <c:if test="${not empty shippingAddresses}">
                    <div id="address-list">
                        <c:forEach items="${shippingAddresses}" var="address">
                            <div class="address-card ${address.isDefault ? 'selected' : ''}" data-id="${address.id}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="addressRadio" 
                                           id="address-${address.id}" value="${address.id}" 
                                           ${address.isDefault ? 'checked' : ''}>
                                    <label class="form-check-label" for="address-${address.id}">
                                        <strong>${address.receiverName}</strong> ${address.receiverPhone}<br>
                                        ${address.receiverProvince} ${address.receiverCity} ${address.receiverDistrict} ${address.receiverAddress}
                                        <c:if test="${address.isDefault}">
                                            <span class="badge badge-primary ml-2">默认</span>
                                        </c:if>
                                    </label>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </c:if>
            </div>
        </div>
        
        <!-- 商品清单 -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">商品清单</h5>
            </div>
            <div class="card-body">
                <c:forEach items="${cartItems}" var="item">
                    <div class="product-item d-flex align-items-center">
                        <img src="${item.productImage}" alt="${item.productName}" style="width: 60px; height: 60px; object-fit: cover; margin-right: 15px;">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">${item.productName}</h6>
                            <small class="text-muted">¥${item.productPrice} × ${item.quantity}</small>
                        </div>
                        <div>
                            <span class="text-primary">¥${item.productTotalPrice}</span>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        
        <!-- 订单汇总 -->
        <div class="order-summary">
            <div class="d-flex justify-content-between mb-2">
                <span>商品金额:</span>
                <span>¥${totalPrice}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span>运费:</span>
                <span>¥0.00</span>
            </div>
            <hr>
            <div class="d-flex justify-content-between mb-2">
                <span class="font-weight-bold">实付金额:</span>
                <span class="text-danger font-weight-bold">¥${totalPrice}</span>
            </div>
            
            <!-- 超级简化版 - 硬编码链接，确保100%成功 -->
            <div class="alert alert-success">
                <h4 class="alert-heading">请选择提交订单方式：</h4>
                <hr>
                
                <div class="mb-4">
                    <h5>方式1: 使用第一个地址 (最推荐)</h5>
                    <a href="${pageContext.request.contextPath}/order/createWithId?id=${shippingAddresses[0].id}" 
                       class="btn btn-lg btn-success btn-block">
                        一键下单 - 使用第一个地址 (ID=${shippingAddresses[0].id})
                    </a>
                    <p class="mt-2 small">此选项将使用您的第一个地址（通常是默认地址）</p>
                </div>
                
                <div class="mb-3">
                    <h5>方式2: 选择特定地址ID</h5>
                    <div class="d-flex flex-wrap justify-content-center">
                        <c:forEach items="${shippingAddresses}" var="address">
                            <a href="${pageContext.request.contextPath}/order/createWithId?id=${address.id}" 
                               class="btn btn-outline-success m-2">
                                ${address.receiverName} (ID=${address.id})
                            </a>
                        </c:forEach>
                    </div>
                </div>
                
                <hr>
                <p class="text-muted text-center">如有问题，请联系客服</p>
            </div>
            
            <!-- 简单直接的订单提交表单 -->
            <div class="text-center btn-submit">
                <form id="direct-order-form" method="post" action="${pageContext.request.contextPath}/order/create-simple">
                    <input type="hidden" id="shippingIdInput" name="shippingId" value="${shippingAddresses[0].id}">
                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="submitOrderBtn">提交订单</button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 引入底部 -->
    <jsp:include page="common/footer.jsp"></jsp:include>
    
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化选中的地址
            var selectedAddress = $('input[name="addressRadio"]:checked').val();
            if (selectedAddress) {
                $('#shippingIdInput').val(selectedAddress);
                console.log('初始化地址ID:', selectedAddress);
            } else if ($('input[name="addressRadio"]').length > 0) {
                // 如果没有选中的地址，但有地址选项，选择第一个
                $('input[name="addressRadio"]').first().prop('checked', true);
                selectedAddress = $('input[name="addressRadio"]').first().val();
                $('#shippingIdInput').val(selectedAddress);
                console.log('自动选择第一个地址ID:', selectedAddress);
            }
            
            // 确保有有效的地址ID
            if (!$('#shippingIdInput').val() && "${not empty shippingAddresses}" === "true") {
                $('#shippingIdInput').val("${shippingAddresses[0].id}");
                console.log('使用默认地址ID:', "${shippingAddresses[0].id}");
            }
            
            // 监听地址选择变化
            $('input[name="addressRadio"]').change(function() {
                $('.address-card').removeClass('selected');
                $(this).closest('.address-card').addClass('selected');
                $('#shippingIdInput').val($(this).val());
                console.log('选择了地址ID:', $(this).val());
            });
            
            // 点击地址卡片也可以选择
            $('.address-card').click(function() {
                var radio = $(this).find('input[type="radio"]');
                radio.prop('checked', true).trigger('change');
            });
            
            // 提交表单前检查
            $('#direct-order-form').submit(function(e) {
                var shippingId = $('#shippingIdInput').val();
                console.log('准备提交订单，收货地址ID:', shippingId);
                
                if (!shippingId) {
                    e.preventDefault();
                    alert('请选择收货地址');
                    return false;
                }
                
                // 确保shippingId是有效的整数
                if (isNaN(parseInt(shippingId))) {
                    e.preventDefault();
                    alert('收货地址ID无效，请重新选择');
                    return false;
                }
                
                // 禁用提交按钮，防止重复提交
                $('#submitOrderBtn').prop('disabled', true).text('处理中...');
                return true;
            });
        });
    </script>
</body>
</html> 